<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>幻灯片切换效果</title>
<link href="css/jquery-ui.css" type="text/css" rel="styleshett" />
<style type="text/css">
#smallImg {
	position: absolute;
	top: 320px;
	left: auto;
}
#smallImg img {
	width: 70px;
	height: 70px;
}
#imgHoder {
	width: 300px;
	height: 300px;
}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
	var pid;
	var $smallImgs = $("#smallImg img");
	var length = $smallImgs.length;
	var imgSrc = [];
	for (var i=0; i<length; i++) {
		imgSrc[i] = $smallImgs.eq(i).attr("src");
	}
	var curIndex = 0;
	autoChange();
	$("#smallImg img").hover(function(){
		window.clearTimeout(pid);
		$(this).siblings().fadeTo(1, 0.2)
		.end().fadeTo(1,1)
		.css({border:"1px solid #F00"});
		$("#imgHoder").attr({src:$(this).attr("src")});
		curIndex = $(this).attr("alt");
	},function(){
		autoChange();
		$("#smallImg img").css("border","none");
	})
	
	function autoChange(){
		var effects = ['blink', 'clip', 'drop', 'explode'];
		var i = Math.floor(Math.random()*4);
		var j = Math.floor(Math.random()*4);
		curIndex = parseInt(curIndex);
		curIndex = (curIndex+1)%length;
		$("#imgHoder").hide(effects[i], function(){
			$("#imgHoder").attr({src:imgSrc[curIndex]}).show(effects[j]);
		});
		pid = window.setTimeout(autoChange, 6000);
	}
	
});
</script>
</head>
<body>
	<div id="placehoder">
		<img src="images/img1.jpg" id="imgHoder" title="1" />
		<div id="smallImg">
			<img src="images/img1.jpg" alt="0" />
			<img src="images/img2.jpg" alt="1" />
			<img src="images/img3.jpg" alt="2" />
			<img src="images/img4.jpg" alt="3" />
		</div>
	</div>
	
</body>
</html>